<template>
  <div class="mt-5 bg-blue-200 p-5" title="子组件" :can-expan="false">
    <h3>子组件</h3>
    <ul>
      <li> names:{{ names }} </li>
      <li> age:{{ age }} </li>
      <li> address:{{ address }} </li>
    </ul>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive } from 'vue';

  let age = ref(20);
  let names = ref(['zhangsna']);
  let address = reactive({
    provience: '河南',
    city: '郑州',
  });

  function changeName() {
    names.value.push('a');
  }

  function changeAge() {
    age.value += 1;
  }
  function changeAddress() {
    address.city += '-@';
  }

  defineExpose({ changeName, changeAge, changeAddress, names, age, address });
</script>

<style lang="less" scoped>
  button {
    margin-left: 5px;
  }

  li {
    margin-top: 10px;
  }

  div {
    border-radius: 10px;
  }

  input {
    height: 25px;
    padding: 2px 5px;
    line-height: 25px;
  }
</style>
